<template>
	<view>
		<view class="bgback"></view>
		<view class="sytop">
			<view class="stxt">{{name}}</view>
			<view class="secon">
				<view @tap="jump('/subcontract/Addresslist/city')">
					<image src="/static/rmap.png" mode="widthFix"></image>
					<view>{{city?city:'请选择'}}</view>
				</view>
				<input type="text" v-model="like" @confirm="serbtn" placeholder="您想知道体验馆的名字" />
				<view class="serbtn" @tap="serbtn">搜索</view>
			</view>
			<view class="tips" v-if="showtip">
				<u-icon name="arrow-upward" :size="'30rpx'"></u-icon>
				<view>
					点击此处显示附近门店
				</view>
				<u-icon name="close" @click="showtips"></u-icon>
			</view>
		</view>

		<view class="sy_content">
			<view class="news">
				<image src="/static/newicon.png" mode="widthFix" class="newicon"></image>
				<swiper class="home-swipers" :circular="true" :autoplay="autoplay1" :vertical="vertical1"
					:interval="interval1" :duration="duration1" :indicator-dots="indicatordots1">
					<block v-for="(item,index) in news" :key="index">
						<swiper-item @tap="jump('/subcontract/news/details?id='+item.id)">
							<view class="newtxt">{{item.title}}</view>
						</swiper-item>
					</block>
				</swiper>
				<image src="/static/newr.png" @tap="jump('/subcontract/news/index')" mode="widthFix" class="mores">
				</image>
			</view>

			<view class="listsy" v-for="(item,index) in shoplist" :key="index"
				@tap="jump('/subcontract/shop/index?id='+item.id)">
				<image :src="imgoss+item.pic" mode="aspectFill" class="cpimg"></image>
				<view class="itemlist">
					<view>{{ item.name }}</view>
					<scroll-view scroll-x="true" class="navtap">
						<view class="txts" v-for="(item1,index1) in item.cete" :key="index1">{{item1.name }}</view>
					</scroll-view>
					<view class="txts1">
						{{ item.province_name }}{{ item.city_name }}{{ item.area_name }}{{ item.address }}</view>
					<view class="txts2">
						<view><span>￥</span>{{ item.money }}</view>
						<view>
							<image :src="item.is_sun == 2?'/static/tyicon.png':'/static/yl.png'" mode="widthFix">
							</image>
							<span>{{item.is_all == 2?'全天营业':'营业至'}}<span
									v-if="item.is_all!=2">{{ item.end_h }}:{{ item.end_i }}</span></span>
						</view>
						<view>{{ item.distance }}km</view>
					</view>
				</view>
			</view>
			<view class="morder" v-if="more==1">没有更多数据</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				statusBarHeight1: app.globalData.statusBarHeight1,
				img_src: app.globalData.img_src,
				imgoss: app.globalData.imgoss,
				navBarHeight: '',
				menuRight: '',
				menuBotton: '',
				menuHeight: '',
				autoplay1: true,
				interval1: 2000,
				duration1: 1200,
				indicatordots1: false,
				vertical1: true,
				news: [],
				like: '',
				showtip: true,
				name: ''
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			state: {
				type: Number,
				default: 0
			},
			more: {
				type: Number,
				default: 0
			},
			shoplist: {
				type: Array,
				default: []
			},
			city: {
				type: [Object, String],
				default: 0
			},
		},
		created() {},
		onload() {
			if (util.isWechat() == true) {
				uni.showModal({
					content: '111'
				})
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			attached: function() {
				const that = this;
				if (uni.getStorageSync('sxtype') == 1) {
					this.showtip = false
				}
				// 获取系统信息
				// const systemInfo = uni.getSystemInfoSync();
				// // 胶囊按钮位置信息
				// const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				// // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
				// ////console.log((systemInfo))
				// this.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight
				// this.menuRight = systemInfo.screenWidth - menuButtonInfo.right
				// this.menuBotton = systemInfo.statusBarHeight
				// this.menuHeight = menuButtonInfo.height
			},

			//公告列表
			notice: function() {
				const that = this;
				app.globalData.api.request('Index/notice', {}, 'post', 'form').then((res) => {
					if (res.code == 0) {
						that.news = res.data;
					} else {
						app.globalData.show(res.msg)
					}
				});
				// app.globalData.api.request('Index/gs', {}, 'post', 'form').then((res) => {
				// 	if (res.code == 0) {
				// 		this.name = res.data.title
				// 		uni.setNavigationBarTitle({
				// 			title: res.data.title,
				// 			success: () => {
				// 				////console.log('修改标题成功')
				// 			},
				// 			fail: () => {
				// 				////console.log('修改标题失败')
				// 			},
				// 			complete: () => {
				// 				////console.log('修改标题结束')
				// 			},
				// 		})
				// 	}else{
				// 		app.globalData.show(res.msg)
				// 	}
				// });
				if(uni.getStorageSync('official_id')){
					app.globalData.api.request('Index/official', {
						official_id:uni.getStorageSync('official_id'),
						// channel_id: uni.getStorageSync('channel_id'),
						// channel_url_id: uni.getStorageSync('channel_url_id'),
						// channel_user_id: uni.getStorageSync('channel_user_id'),
					}, 'POST', 'form').then((res) => {
						if (res.code == 0) {
							this.name = res.data.name
							uni.setNavigationBarTitle({
								title: res.data.name,
								success: () => {
									////console.log('修改标题成功')
								},
								fail: () => {
									////console.log('修改标题失败')
								},
								complete: () => {
									////console.log('修改标题结束')
								},
							})
					
						} else {
							app.globalData.show(res.msg)
						}
					});
					
				}
				
			},
			serbtn() {
				this.$emit('serbtn', this.like);
			},
			showtips() {
				this.showtip = false
				uni.setStorageSync('sxtype', 1);
			}
		},
		mounted() {
			// 处理小程序 attached 生命周期
			this.attached();
			this.notice();
		},
	};
</script>
<style lang="scss">
	.bgback {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		position: fixed;
		top: 0px;
		left: 0px;
	}

	.tips {
		border-radius: 5rpx;
		background: linear-gradient(95.23deg, rgba(157, 102, 171, 1) 5.32%, rgba(118, 100, 177, 1) 96.22%);
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.17);
		display: inline-block;
		position: absolute;
		width: 381rpx;
		height: 67rpx;
		line-height: 67rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: -30rpx;
		left: 40px;
	}

	.tips>view {
		margin: 0 10rpx;
	}

	.txts2>view {
		width: auto;
		height: 45rpx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.txts2>view:nth-child(1) {
		color: rgba(217, 104, 142, 1);
		font-size: 32rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}

	.txts2>view:nth-child(1)>span {
		font-size: 24rpx !important;
	}

	.txts2>view:nth-child(2) {
		color: #fff;
		font-size: 24rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
		border-radius: 8rpx;
		background: linear-gradient(97.47deg, rgba(104, 102, 177, 1) 3.79%, rgba(162, 99, 175, 1) 95.07%);
		padding: 0px 10rpx;
		margin-left: 20rpx;
	}

	.txts2>view:nth-child(2)>image {
		width: 26rpx;
		height: auto;
		margin-right: 7rpx;
	}

	.txts2 {
		width: 100%;
		height: 45rpx;
		display: inline-flex;
		float: left;
		margin-top: 10px;
		position: relative;
	}

	.txts2>view:nth-child(3) {
		position: absolute;
		top: 0px;
		right: 0px;
		line-height: 45rpx;
		color: rgba(157, 102, 171, 1);
		font-size: 24rpx;
	}

	.txts1 {
		width: 100%;
		height: auto;
		display: table;
		line-height: 45rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 24rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.txts {
		border-radius: 5rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(149, 149, 149, 1);
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		border: 2rpx solid rgba(230, 230, 230, 1);
		box-sizing: border-box;
		padding: 0px 20rpx;
		margin: 5px 0px;
		display: inline-block;
		margin-right: 20rpx;
		line-height: 40rpx;
	}

	.navtap {
		display: inline-flex;
		white-space: nowrap;
		width: 453rpx;
		height: auto;
	}

	.itemlist>view:nth-child(1) {
		width: 100%;
		height: auto;
		display: table;
		color: rgba(16, 16, 16, 1);
		font-size: 30rpx;
		text-align: left;
		font-family: PingFangSC-bold;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.itemlist {
		width: 100%;
		min-height: 236rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0px;
		border-bottom: 1px solid rgba(187, 187, 187, 0.3);
	}

	.cpimg {
		width: 177rpx;
		height: 236rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
	}

	.listsy {
		width: 690rpx;
		min-height: 276rpx;
		display: table;
		margin-left: 30rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		padding: 0px 20rpx;
		padding-left: 217rpx;
		background-color: #fff;
		position: relative;
		border-radius: 10rpx;
	}

	.news {
		width: 690rpx;
		height: 40px;
		display: table;
		height: 90rpx;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		margin: 30rpx 30rpx;
		position: relative;
		box-sizing: border-box;
		padding-left: 45px;
		padding-right: 30px;
		margin-bottom: 15px;
		overflow: hidden;
	}

	.newicon {
		width: 28px;
		position: absolute;
		top: 50%;
		margin-top: -13px;
		left: 9px;
	}

	.home-swipers {
		width: 100%;
		height: 90rpx;
		display: table;
	}

	.newtxt {
		width: 100%;
		height: 90rpx;
		display: table;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(16, 16, 16, 1);
		line-height: 90rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.mores {
		width: 20px;
		height: 20px;
		position: absolute;
		top: 50%;
		right: 5px;
		margin-top: -10px;
	}

	.sy_content {
		margin-top: 130px;
		padding-bottom: 140rpx;
	}

	.serbtn {
		width: 100rpx;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 28rpx;
		color: #7664B1;
	}

	.secon {
		width: 100%;
		height: 50px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0px 0rpx;
		position: relative;
		display: flex;
		margin-bottom: 20px;

		view:nth-child(1):before {
			content: '';
			width: 1px;
			height: 20px;
			background-color: rgba(187, 187, 187, 1);
			position: absolute;
			top: 50%;
			right: -8px;
			margin-top: -10px;
		}

		view:nth-child(1) {
			width: 160rpx;
			height: 50px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			position: relative;

			image {
				width: 35rpx;
				height: auto;
				margin-right: 10rpx;
			}

			view {
				max-width: 105rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 24rpx;
				font-family: PingFangSC-regular;
			}
		}

		input {
			width: 430rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			font-family: PingFangSC-regular;
			height: 50px;
			box-sizing: border-box;
			padding-left: 30px;
		}
	}

	.stxt {
		width: 100%;
		height: auto;
		display: table;
		line-height: 45px;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.sytop {
		width: 100%;
		height: auto;
		display: table;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
		background: url($IMG_URL+'syimg.png')no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 0px 30rpx;
	}

	page {
		background: #fff;
	}
</style>